<template>
  <div>
    <el-row class="headTitle">
      <el-col :span="24">
        <div class="grid-content ep-bg-purple-dark">
          <li>
            <el-checkbox v-model="orderList.checked">全选</el-checkbox>
          </li>
          <li><span>订单编号</span></li>
          <li>实付金额</li>
          <li>快速金额</li>
          <li>收货人</li>
          <li class="adress">收货地址</li>
          <li>成交金额</li>
          <li>订单状态</li>
          <li>支付方式</li>
          <li>操作</li>
        </div>
      </el-col>
    </el-row>
    <el-row v-for="(item, index) in orderList" :key="item.shopId">
      <el-col :span="24">
        <div class="grid-content ep-bg-purple-dark">
          <li>
            <el-checkbox v-model="item.checked" :value="item"></el-checkbox>
          </li>
          <li>{{ item.orderPO }}</li>
          <li>{{ item.num * item.price }}</li>
          <li>{{ item.payBefore }}</li>
          <li>{{ item.name }}</li>         
          <li class="adress">
            <input type="text" v-model="value" v-show="item.flag" />
            <span v-show="!item.flag">{{ item.shopAddress }}</span>
          </li>
          <li>{{ item.num * item.price }}</li>
          <li>{{ item.orderStatus }}</li>
          <li>{{ item.payWay }}</li>
          <li class="btn">
            <el-button size="small" round @click="revise(item)">修改</el-button>
            <el-button size="small" round @click.prevent="open(item,index)">删除</el-button>
            <el-button size="small" round @click="confirm(item)">确定</el-button>
          </li>
        </div>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        :total="100"
        class="mt-4"
        small
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.el-main {
  overflow: hidden;
}
.headTitle {
  font-weight: 700;
}
.el-col {
  border-radius: 4px;
  border: 1px solid black;
}
.grid-content {
  border-radius: 4px;
  min-height: 40px;
  font-size: 11px;
  .el-button {
    margin-left: 2px;
  }
  li {
    float: left;
    width: 9%;
    height: 40px;
    display: flex;
    align-content: center;
    justify-content: space-around;
    align-items: center;
  }
  li:nth-child(1) {
    width: 5%;
  }
  li:nth-child(2) {
    width: 10%;
  }
  .adress {
    width: 16%;
  }
  li:last-child {
    margin-left: 20px;
  }
}
.el-pagination {
  justify-content: center;
  margin-top: 20px;
}
</style>


<script>
import datas from "@/mock/index.js";
import { onMounted, ref } from "vue";
import { ElMessageBox } from "element-plus";
export default {
  setup() {
    const orderList = ref([]);
    const value = ref("");
    //数据请求
    const currentPage = ref(1);
    const pageSize = ref(6);
    const count = ref();

    // 请求数据函数
    const getData = async () => {
      const res = await datas.getData({
        pageSize: pageSize.value,
        currentPage: currentPage.value,
      });
      orderList.value = res.list;
      count.value = res.count;
    };
   
    // 挂在前调用请求数据函数 渲染页面
    onMounted(() => {
      getData();
    });
    
    // 点击分页时调用请求函数 调用函数前赋值传参 =>请求数据
    const handleCurrentChange = (val) => {
      currentPage.value = val;
      getData(val);
    };

    // 删除/弹出提示框
    const open = (item) => {
      if (item.checked === true) {
        ElMessageBox.confirm("您确认删除此项吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(()=>{
            // orderList.value.splice(index, 1);
            console.log(item);           
            datas.removeData(item.shopId)
            getData()
          })
          .catch(() => {
            return;
          });
      }
      // });
    };
    // 修改
    const revise = (item) => {
      // console.log(item);
      item.flag = true;
      if (value.value === "") {
        return;
      } else {
        item.shopAddress = value.value;
      }
    };
    // 确定  点击确定修改数据成功，
    const confirm = (item) => {
      item.flag = false;
      // console.log(item.shopId);
      if (value.value === "") {
        return;
      } else {
        item.shopAddress = value.value;
      }
    };

    return {
      orderList,
      currentPage,
      pageSize,
      handleCurrentChange,
      count,
      open,
      ElMessageBox,
      revise,
      value,
      confirm,
    };
  },
};
</script>